<template>
  <div class="order-detail" v-if="detail">
    <div class="detail-header flex jcs">
      <p class="fw500 fs16 cl4d">订单号：<span>{{detail.tradeNo}}</span></p>
      <p class="fw500 fs15">
        <span class="mr10 fs16 clFB">¥ {{detail.amount}}</span>
        <!-- <span class="cl66">待支付</span> -->
        <span class="cl66">{{getStatus(detail.status)}}</span>
      </p>
    </div>
    <div class="detail-content">
      <div class="content-tit flex jcs alc">
        <div>
          <p class="mb9 fs16">
            <span class="cl3 mr16 fw500">{{detail.title}}</span
            ><span class="clb3">¥  {{detail.fee}} * {{detail.quantity}}</span>
          </p>
          <p class="fs13 cl9">{{detail.reservedate}} {{detail.cnWeek}} {{detail.starttime}} - {{detail.endtime}}</p>
        </div>
        <div>

          <el-button @click="cancleorder" v-if="detail.status === 'new_locked' " size="mini">取消</el-button>
          <el-button @click="gopay" v-if="detail.status === 'new_locked' && detail.new " size="mini" type="primary">去支付</el-button>
          <el-button v-if="detail.status === 'paid_return_succ' " size="mini" plain type="success">开具发票</el-button>

        </div>
      </div>
      <div class="content-detail">
        <p class="trueinfo-tit fs16 fw600 cl3">实名信息</p>
        <div class="trueinfo-b flex">
          <div class="trueinfo-item" v-for="item in detail.orderVisitorInfoList" :key="item.id">
            <p class="cl4d fs14 fw500 mb2 flex jcs alc">
              <span class="flex">
                <span>{{ item.realname }}</span>
                <span v-if="item.youngFlag === 'Y'" class="no18">未满18岁</span>
              </span>

              <el-popover
                placement="top"
                trigger="hover"
                v-if="item.ticketInfoId"
              >
                <span class="fs13">
                    <span class="cl80 mr10">关联成人</span>
                    <span class="cl4d">{{item.adultRealname}} {{getCardType(item.adultCertificateType)}} {{item.adultCertificateNo}}</span>
                </span>
                  <span slot="reference" v-if="item.youngFlag === 'Y'" class="cl0097 fw400 fs13 curp"
                    >已关联成人 &nbsp;></span
                  >
              </el-popover>
            </p>
            <p class="fs12 cl9 fw400">
              <span class="mr10">{{getCardType(item.adultCertificateType)}}</span>
              <span>{{ item.certificateNo }}</span>
            </p>
          </div>
        </div>
        <p class="order-info fs15 fw600 pt24 pb12">订单信息</p>
        <p class="order-time fs12">
          <span class="mr24 cl80">订单时间</span>
          <span>{{detail.paidtime}}</span>
        </p>
        <p class="order-way fs12">
          <span class="mr24 cl80">支付方式</span>
          <span>{{detail.gatewayName}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { orderResult, cancelOrder, repeatedPayOrder, payAli } from '@/http/protocol'

export default {
  name: 'orderdetail',
  data () {
    return {
      detail: null
    }
  },
  mounted () {
    const tradeNo = this.$route.params.id
    this.orderResult(tradeNo)
  },
  methods: {
    async orderResult (tradeNo) {
      const res = await orderResult({ tradeNo })
      if (res.success) {
        this.detail = res.data
        console.log(res.data)
      }
    },
    async cancleorder () {
      const { tradeNo = '' } = this.detail
      if (!tradeNo) return
      this.$confirm('确认取消？', '确认信息').then(async () => {
        const res1 = await cancelOrder(tradeNo)
        if (res1.success) {
          this.$ok('取消成功')
          this.orderResult()
        } else {
          this.$err(res1.msg)
        }
      })
    },
    async gopay () {
      const { tradeNo = '' } = this.detail
      if (!tradeNo) return false
      this.$confirm('确认支付？', '确认信息').then(async () => {
        const res1 = await repeatedPayOrder({ tradeNo })
        if (res1.success) {
          // this.$ok('支付成功')
          payAli(res1.data)
          this.orderResult()
        } else {
          this.$err(res1.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.order-detail {
  width: 1274px;
  margin: 0 auto;
  min-height: 400px;

  padding-bottom: 64px;
  .detail-header {
    height: 64px;
    background: #ffffff;
    border: 1px solid #f4f4f4;
    margin-bottom: 16px;
    padding: 21px 24px;
  }
  .content-tit {
    width: 1274px;
    height: 86px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    padding: 20px 24px;
  }
  .content-detail {
    min-height: 314px;
    padding: 24px;
    padding-bottom: 50px;

    border: 1px solid #f4f4f4;
    border-top: none;
    .trueinfo-tit {
      margin-bottom: 8px;
    }
    .trueinfo-b {
      flex-wrap: wrap;
      .trueinfo-item {
        width: 306px;
        height: 64px;
        background: #ffffff;
        border: 1px solid #f4f4f4;
        padding: 13px 16px;
        margin-right: -1px;
        .no18 {
          font-size: 11px;
          font-weight: 500;
          color: #ffffff;
          line-height: 16px;
          text-align: center;
          width: 48px;
          height: 16px;
          background: #5fd4a3;
          border-radius: 3px;
          margin-left: 8px;
        }
      }
    }
    .order-time {
      width: 286px;
      height: 32px;
      border-bottom: 1px solid #f5f5f5;
      margin-bottom: 8px;
    }
    .order-way {
      width: 286px;
      height: 32px;
      border-bottom: 1px solid #f5f5f5;
    }
  }
}
</style>
